<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../../css/app.css">
    <link rel="stylesheet" type="text/css" href="../../../css/tabBar.css">
    <link rel="stylesheet" type="text/css" href="../comm/shop_comm.css"/>
    <link rel="stylesheet" type="text/css" href="./shop_order.css">
    <title>订单与收入</title>
</head>

<body>
    <div class="header navigationBar">
        <div class="wrapper">
            <span id="btn-back" class="header-btn left-btn backtrack"></span>
            <span class="title">
              <a href="javascript: void(0)">我的订单</a>
            </span>
            <!-- <span class="right-btn aui-iconfont aui-icon-search"></span> -->
        </div>
    </div>

    <div class="container top-container" v-cloak>

      <div class="aui-searchbar" id="search">
        <div class="aui-searchbar-input aui-border-radius">
            <i class="aui-iconfont aui-icon-search"></i>
            <!-- <form action="javascript:search();"> -->
            <form action="javascript:;" class="form_">
                <input type="search" placeholder="商品|订单号|手机号|姓名|物流单号" id="search-input" @search="openSearch">
            </form>
        </div>
      </div>

      <ul class="shop_order_complete">
    		<li :class="activeUpIndex == 0 ? 'active' : ''" @click="upOrderTab(0)">
    			<span>进行中</span>
    		</li>
    		<li :class="activeUpIndex == 1 ? 'active' : ''" @click="upOrderTab(1)">
    			<span>已完成</span>
    		</li>
    		<li :class="activeUpIndex == 2 ? 'active' : ''" @click="upOrderTab(2)">
    			<span>已关闭</span>
    		</li>
        <li :class="activeUpIndex == 3 ? 'active' : ''" @click="upOrderTab(3)">
    			<span>已退款/退货</span>
    		</li>
    	</ul>
    	<ul class="shop_order_await">
    		<li :class="activeIndex == 0 ? 'active' : ''" @click="orderTab(0)">
    			<b> <span v-html="orderNumber.unpay_num"></span> </b>
    			<p>待付款</p>
    		</li>
    		<li :class="activeIndex == 1 ? 'active' : ''" @click="orderTab(1)">
    			<b> <span v-html="orderNumber.pay_num"></span> </b>
    			<p>待发货</p>
    		</li>
    		<li :class="activeIndex == 2 ? 'active' : ''" @click="orderTab(2)">
    			<b> <span v-html="orderNumber.express_num"></span> </b>
    			<p>已发货</p>
    		</li>
    		<li :class="activeIndex == 3 ? 'active' : ''" @click="orderTab(3)">
    			<b> <span v-html="orderNumber.refund_num"></span> </b>
    			<p>退款/售后</p>
    		</li>
    	</ul>
      <ul class="shop_order_finish" data-index="-1">
    		<li :class="activeIndex == 4 ? 'active' : ''" @click="orderTab(4)">
    			<b> <span v-html="orderNumber.comment_num"></span> </b>
    			<p>待评价</p>
    		</li>
    		<li :class="activeIndex == 5 ? 'active' : ''" @click="orderTab(5)">
    			<b> <span v-html="orderNumber.finish_num"></span> </b>
    			<p>已评价</p>
    		</li>
    	</ul>

    	<div class="shop_order_null" style="display: none;">
  			<img src="../../../image/shop/buy/buy-82.png"/>
  			<h2>暂无记录</h2>
  			<p>可以分享宝贝给你客户</p>
  			<!-- <a href="javascript:void(0);" @click="goodsManageShare(item.cover, item.name, item.goods_id)">前往分享</a> -->
  		</div>

    	<ul class="shop_order_list">
    		<li v-for="item in orderList">
    			<div class="order_list_buyer">
    				<span v-show="!item.group_buying" :class="item.yzc_status ? 'yzc_buyer' : 'buyer'">买家</span>
            <span v-show="item.group_buying" class="group_buyer">拼团</span>
             <span v-html="item.user_name"></span>
             <i>
               <span v-if="item.date_group" v-html="item.order_state_msg"></span>
               <span v-if="!item.date_group" v-html="item.order_state_msg"></span>
             </i>
    			</div>
    			<div class="order_list_box" v-for="(info, index) in item.goods" @click="getOrderDetail(item.id)">
	    			<div class="order_list_img">
	    				<img :src="info.goods_image+'?x-oss-process=image/resize,m_lfit,w_960'"/>
	    			</div>

            <div class="order_list_info">
	    				<h2 v-html="info.goods_name"></h2>
	    				<p><span>订单编号：</span><span v-html="item.order_sn"></span></p>
	    				<p><span>订单型号：</span><span v-html="info.option_name"></span></p>
	    				<p><span>订单数量：</span> <span v-html="info.quantity"></span> </p>
	    				<p><span>订单金额：</span><u><em v-if="!item.yzc_status">¥</em> <em v-if="item.yzc_status"><img src="../../../image/shop/yzc_icon.png" alt=""></em> <span v-html="info.price"></span> </u>
              <i class="aui-iconfont aui-icon-date"> <span v-html="item.date_add"></span> </i></p>
	    			</div>


    			</div>
    			<div class="order_list_money">
    				实付：
            <em v-if="!item.yzc_status">¥</em>
            <span v-if="item.yzc_status && item.express_amount!='0.00'" v-html="'¥'+item.express_amount+' + '"></span>
            <em v-if="item.yzc_status">
              <img src="../../../image/shop/yzc_icon.png" alt="">
            </em> <span v-html="item.order_amount"></span>
    			</div>
    			<div class="order_list_btn">
            <!-- <a href="javascript:void(0);" v-if="item.order_state == 1 || item.order_state == 3 || item.order_state == 4" @click="orderModBtn('shopChat', item.id, item.user_info)">
               <span>联系买家</span>
            </a> -->
            <a href="javascript:void(0);" v-if="(item.order_state == 2 && item.group_buying == 1 && item.is_group == 1) || (item.order_state == 2 && item.group_buying != 1)" class="single_color_class" @click="orderModBtn('shopSend', item.id)">
               <span>发货</span>
            </a>
            <a href="javascript:void(0);" v-if="item.order_state == 2 && item.group_buying == 1 && item.is_group != 1">
               <span>待成团</span>
            </a>
            <a href="javascript:void(0);" v-if="item.order_state == 3" @click="orderModBtn('shopFlow', item.id)">
               <span>查看物流</span>
            </a>
            <a href="javascript:void(0);" v-if="item.order_state == 7" @click="orderModBtn('shopRefundRefuse', item.id)">
               <span>拒绝退款</span>
            </a>
            <a href="javascript:void(0);" v-if="item.order_state == 7" :class="item.yzc_status ? 'yzc_color_class' : (item.group_buying ? 'group_color_class' : 'single_color_class')" @click="orderModBtn('shopRefundPass', item.id)">
               <span>确认退款</span>
            </a>
            <a href="javascript:void(0);" v-if="item.order_state == 9" @click="orderModBtn('shopReturnRefuse', item.id)">
               <span>拒绝退货</span>
            </a>
            <a href="javascript:void(0);" v-if="item.order_state == 9 && item.deal_confirm < 1" :class="item.yzc_status ? 'yzc_color_class' : (item.group_buying ? 'group_color_class' : 'single_color_class')" @click="orderModBtn('shopReturnconfirm', item.id)">
               <span>同意申请</span>
            </a>
            <a href="javascript:void(0);" v-if="item.order_state == 9 && item.deal_confirm == 1" :class="item.yzc_status ? 'yzc_color_class' : (item.group_buying ? 'group_color_class' : 'single_color_class')" @click="orderModBtn('shopReturnPass', item.id)">
               <span>确认退货</span>
            </a>
            <a href="javascript:void(0);" v-if="item.order_state>=5 && item.order_state!=7 && item.order_state!=9" :class="item.yzc_status ? 'yzc_color_class' : (item.group_buying ? 'group_color_class' : 'single_color_class')" @click="orderModBtn('shopDel', item.id)">
               <span>删除订单</span>
            </a>
    			</div>
    		</li>
    	</ul>
    	<div class="shop_order_refund" @click="close_shop_order_refund">
  			<section>
  				<h2>退款金额</h2>
  				<b><em v-if="!yzc_status">¥</em><em v-if="yzc_status"><img src="../../../image/shop/yzc_icon.png" alt=""></em> {{refundPrice}}</b>
  				<div>
  					<a href="javascript:void(0);" @click="closeRefund">取消</a>
  					<a href="javascript:void(0);" @click="passRefund">确定</a>
  				</div>
  			</section>
  		</div>

      <div class="shop_order_return" @click="close_shop_order_return">
  			<section>
  				<h2>确认退货及退款</h2>
  				<b><em v-if="!yzc_status">¥</em><em v-if="yzc_status"><img src="../../../image/shop/yzc_icon.png" alt=""></em> {{refundPrice}}</b>
  				<div>
  					<a href="javascript:void(0);" @click="closeReturn">取消</a>
  					<a href="javascript:void(0);" @click="passReturn">确定</a>
  				</div>
  			</section>
  		</div>

      <div class="tc_box">
          <div class="tc_box_win">
            <div class="bz_box">
              <div class="bz_box_header">
                  请确认是否删除该订单
              </div>
              <div class="bz_box_footer">
                  <div>
                      <a href="javascript:void(0);" @click="delOrderCancel">取消</a>
                  </div>
                  <div>
                      <a href="javascript:void(0);" @click="delOrderSure()">确定</a>
                  </div>
              </div>
            </div>
          </div>
      </div>

    </div>
</body>
<script src="../../sea.js" data-main="../../main"></script>
<script type="text/javascript" src="../../vue.js"></script>
<script type="text/javascript" src="./shopOrder.js"></script>
</html>
